<template>
    <view>
        <view class="padding flex text-center text-grey bg-white shadow-warp">
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl  text-blue">{{statistics.deviceCount}}</view>
                <view class="margin-top-sm">设备数</view>
            </view>
            <view class="flex flex-sub flex-direction solid-right">
                <view class="text-xxl text-green">{{statistics.onlineCount}}</view>
                <view class="margin-top-sm">在线</view>
            </view>
        </view>
        <view class="cu-list menu margin-top">
            <view class="cu-item arrow" v-for="device in devices">
                <navigator :url="`device-info/device-info?deviceId=${device.id}`" class="content"
                           hover-class="none">
                    <text :class="device.status==='ONLINE'?'text-yellow':'text-grey'" class="cuIcon-title"></text>
                    <text class="text-grey">{{device.deviceName}}</text>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({
        props: {
            devices: [],
            statistics:{}
        },
        mounted(): void {

        },
        created(): void {
            // console.log("created");

        }, onLoad() {
            console.log("onLoad devices")
        }
    })
</script>

<style scoped>

</style>
